<template>
  <div class="page luckdraw-setting">
    <div class="group">
      <m-link title="清除缓存" isLast @on-click="onClearStorageClick"></m-link>
    </div>
    <div class="group">
      <m-link title="常见问题" link="/pages/qa/main"></m-link>
      <m-link title="联系我们" isLast openType="contact"></m-link>
    </div>
    <div class="group">
      <m-link title="绑定手机号" isLast :addon="phone" @on-click="onBindMobileClick"></m-link>
    </div>
  </div>
</template>

<script>
import MLink from 'comp/m-link'
import { clearStorage } from '@/utils/wx'
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  components: {
    MLink
  },
  data () {
    return {
      phone: ''
    }
  },
  mounted () {
    this.getPhone()
  },
  methods: {
    /**
     * 清除缓存
     */
    async onClearStorageClick () {
      try {
        await clearStorage()
        wx.showToast({
          title: '清除成功'
        })
      } catch (err) {
        wx.showToast({
          title: '清除失败，请重试'
        })
      }
    },
    async getPhone () {
      const openId = await this.getOpenId()
      const ret = await this.$store.dispatch('getPlayerInfo', {
        playerid: openId
      })
      if (ret && ret.phone) {
        this.phone = ret.phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
      }
    },
    /**
     * 绑定手机号，先判断是否已绑定，无绑定则直接跳转编辑页面，已绑定则跳转手机号展示页面
     */
    onBindMobileClick () {
      if (this.phone) {
        wx.navigateTo({
          url: '/pages/mobile/main',
        })
      } else {
        wx.navigateTo({
          url: '/pages/mobile-edit/main',
        })
      }
    }
  },
}
</script>

<style lang="less" scoped>
.luckdraw-setting {
  .group {
    padding-top: 20rpx;
  }
}
</style>
